<template>
  <div class="app-container">
    <!-- 基本信息 -->
    <div class="titleLineGreen">基本信息</div>
    <div class="info flex">
      <el-button class="info_btn" @click="showExportDialog" type="primary">
        按班级导出成绩
      </el-button>
      <div class="flex">
        <div class="info_avatar">
          <el-image
            class="info_avatar_img"
            :src="info.coursePic"
            :preview-src-list="[info.coursePic]"
          ></el-image>
          <div class="courseStar">
            <el-rate disabled :value="info.courseStar"></el-rate>
          </div>
        </div>

        <div class="info_right">
          <!-- 教师信息 -->
          <div class="info_teacherinfos">
            <div class="flex info_teacherinfo_line1">
              <div class="info_teacherinfo_line_item flex">
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="info.courseName"
                  placement="top-start"
                >
                  <div class="info_teacherinfo_line_item_nickname overTxt">
                    {{ info.courseName }}
                  </div>
                </el-tooltip>
              </div>
              <!-- <div class="info_teacherinfo_line_item overTxt">
                课程编号: {{ info.courseNum }}
              </div> -->
            </div>
            <div class="flex info_teacherinfo_line2">
              <div class="info_teacherinfo_line_item_short overTxt">
                主讲教师: {{ info.principalName }}
              </div>
              <div
                v-if="!info.teachers"
                class="info_teacherinfo_line_item_short overTxt"
              >
                辅助教师: --
              </div>
              <el-tooltip
                v-else
                class="item"
                effect="dark"
                :content="info.teachers"
                placement="top-start"
              >
                <div class="info_teacherinfo_line_item_short overTxt">
                  辅助教师: {{ info.teachers }}
                </div>
              </el-tooltip>
              <div
                v-if="!info.workstationName"
                class="info_teacherinfo_line_item_short overTxt"
              >
                关联工作站: --
              </div>
              <el-tooltip
                v-else
                class="item"
                effect="dark"
                :content="info.workstationName"
                placement="top-start"
              >
                <div class="info_teacherinfo_line_item_short overTxt">
                  关联工作站: {{ info.workstationName }}
                </div>
              </el-tooltip>
            </div>
          </div>
          <!-- 数据卡片 -->
          <div class="info_dataCards flex">
            <div class="info_dataCard" style="margin: 0 0 0 0">
              <!-- 数据卡片的顶行 -->
              <div class="info_dataCard_topLine flex">
                <div
                  class="info_dataCard_topLine_point"
                  style="background: rgba(44, 172, 255, 1)"
                ></div>
                <div class="info_dataCard_topLine_lable">
                  学习数据 <span>(本学期/历史)</span>
                </div>
              </div>
              <!-- 数据卡片数据行 -->
              <div class="info_dataCard_dateLine info_dataCard_dateLine2 flex">
                <div
                  class="info_dataCard_dateLine_item"
                  style="
                    max-width: 6vw;
                    margin-right: 1.5vw;
                    text-align: center;
                  "
                >
                  <div class="info_dataCard_dateLine_item_lable">平均成绩</div>
                  <div class="info_dataCard_dateLine_item_value">
                    {{ info.avgScore ? info.avgScore : '--' }}
                    <span v-if="info.hisAvgScore">/{{ info.hisAvgScore }}</span>
                  </div>
                </div>
                <div
                  class="info_dataCard_dateLine_item"
                  style="width: 6.2vw; margin-right: 1.5vw; text-align: center"
                >
                  <div class="info_dataCard_dateLine_item_lable">
                    平均完成时间(h)
                  </div>
                  <div class="info_dataCard_dateLine_item_value">
                    {{
                    info.avgStudyTime == 0
                    ? 0
                    : info.avgStudyTime
                    ? (info.avgStudyTime / 60 / 60).toFixed(2)
                    : '--'
                    }}
                  </div>
                </div>
                <div
                  class="info_dataCard_dateLine_item"
                  style="width: 5.2vw; margin-right: 1.5vw; text-align: center"
                >
                  <div class="info_dataCard_dateLine_item_lable">
                    在学学生人数
                  </div>
                  <div class="info_dataCard_dateLine_item_value">
                    {{
                    info.learningNum || info.learningNum == 0
                    ? info.learningNum
                    : '--'
                    }}
                  </div>
                </div>
                <div
                  class="info_dataCard_dateLine_item"
                  style="width: 5.2vw; margin-right: 1.5vw; text-align: center"
                >
                  <div class="info_dataCard_dateLine_item_lable">
                    累计报名人数
                  </div>
                  <div class="info_dataCard_dateLine_item_value">
                    {{
                    info.selectNum || info.selectNum == 0
                    ? info.selectNum
                    : '--'
                    }}
                  </div>
                </div>
                <!-- <div
                  class="info_dataCard_dateLine_item"
                  style="width: 3.1vw; text-align: center"
                >
                  <div class="info_dataCard_dateLine_item_lable">优秀率</div>
                  <div class="info_dataCard_dateLine_item_value">
                    {{
                      info.goodPer || info.goodPer == 0
                        ? info.goodPer + "%"
                        : "--"
                    }}
                  </div>
                </div> -->
              </div>
            </div>
          </div>
        </div>
      </div>

      <div
        class="pieCharts"
        style="width: 350px; height: 200px"
        ref="creditDetailsRef"
      ></div>
    </div>
    <!-- 评价 -->
    <div class="titleLineGreen" style="margin-top: 0">评价</div>
    <el-form
      style="margin-top: 20px"
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      :label-width="!showSearch ? '50px' : '100px'"
    >
      <el-form-item label="学期" prop="semesterId">
        <el-select
          @change="getGradesSchedulingList"
          style="width: 150px"
          filterable
          v-model="queryParams.semesterId"
          placeholder="请选择"
          clearable
        >
          <el-option label="全部" :value="''"></el-option>
          <el-option
            v-for="item in schoolSemesterList"
            :key="item.semesterId"
            :label="item.semesterName"
            :value="item.semesterId"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="学生" prop="name">
        <el-input
          style="width: 150px"
          v-model="queryParams.name"
          placeholder="请输入学生名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="班级" prop="classId">
        <el-select
          style="width: 150px"
          filterable
          v-model="queryParams.classId"
          placeholder="请选择"
          clearable
        >
          <el-option
            v-for="item in classes"
            :key="item.classId"
            :label="item.className"
            :value="item.classId"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="成绩范围" prop="minScore" v-show="showSearch">
        <el-input-number
          :precision="0"
          @input="handleInputScoreChange1"
          style="width: 160px !important"
          :min="0"
          controls-position="right"
          v-model="queryParams.minScore"
          placeholder=""
          clearable
          @keyup.enter.native="handleQuery"
        />
        至
        <el-input-number
          :precision="0"
          @input="handleInputScoreChange2"
          style="width: 160px !important"
          :min="0"
          controls-position="right"
          v-model="queryParams.maxScore"
          placeholder=""
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="评价" prop="evaluateStatus" v-show="showSearch">
        <el-input-number
          :precision="0"
          @input="handleInputNumberChange1"
          style="width: 100px !important"
          :min="0"
          :max="5"
          controls-position="right"
          v-model="queryParams.minNum"
          placeholder=""
          clearable
          @keyup.enter.native="handleQuery"
        />
        至
        <el-input-number
          :precision="0"
          @input="handleInputNumberChange2"
          style="width: 100px !important"
          :min="0"
          :max="5"
          controls-position="right"
          v-model="queryParams.maxNum"
          placeholder=""
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="学习开始时间" prop="studyBegin" v-show="showSearch">
        <el-date-picker
          value-format="yyyy-MM-dd HH:mm:ss"
          v-model="queryParams.studyBegin"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="$pickerOptions"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="学习结束时间" prop="studyEnd" v-show="showSearch">
        <el-date-picker
          value-format="yyyy-MM-dd HH:mm:ss"
          v-model="queryParams.studyEnd"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="$pickerOptions"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button
          v-preventReClick
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
        >搜索
        </el-button>
        <el-button
          v-preventReClick
          icon="el-icon-refresh"
          size="mini"
          @click="resetQuery"
        >重置
        </el-button>
      </el-form-item>
      <right-toolbar
        style="margin-top: 3px"
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-form>
    <el-tabs v-model="queryParams.studyStatus" @tab-click="getList">
      <el-tab-pane label="全部" name=""></el-tab-pane>
      <el-tab-pane label="学习中" name="1"></el-tab-pane>
      <el-tab-pane label="已学习" name="2"></el-tab-pane>
      <el-tab-pane label="中止" name="3"></el-tab-pane>
    </el-tabs>
    <el-table v-loading="loading" max-height="700px" :data="postList">
      <el-table-column
        fixed
        label="学生"
        align="center"
        prop="studentName"
        width="120px"
      />
      <el-table-column
        fixed
        label="学号"
        align="center"
        prop="studentNum"
        width="120px"
      />
      <el-table-column label="班级(学院-专业)" align="center" prop="className">
        <template slot-scope="scope">
          <div>
            {{ scope.row.className }}({{ scope.row.branchName }}-{{
            scope.row.majorName
            }})
          </div>
        </template>
      </el-table-column>
      <el-table-column label="授课班级" align="center" prop="studyClassName">
        <template slot-scope="scope">
          <div>{{ scope.row.studyClassName }}</div>
        </template>
      </el-table-column>
      <el-table-column
        label="学习开始时间"
        align="center"
        prop="startTime"
        sortable
        width="160"
      >
        <template slot-scope="scope">
          <div>
            {{ scope.row.startTime ? parseTime(scope.row.startTime) : "暂无" }}
          </div>
        </template>
      </el-table-column>

      <el-table-column
        width="160"
        label="学习完成时间"
        align="center"
        prop="finishTime"
        sortable
      >
        <template slot-scope="scope">
          <div>
            {{
            scope.row.finishTime ? parseTime(scope.row.finishTime) : '暂无'
            }}
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" sortable width="100">
        <template #header>
          分数
          <el-tooltip class="item" effect="dark" placement="bottom">
            <i
              class="el-icon-question shou"
              style="font-size: 16px; vertical-align: middle; margin-left: 5px"
            ></i>
            <div slot="content">
              <div>"0"：该课程的考核成绩</div>
              <div>" "：该课程没有考核</div>
              <div>"-"：学生尚未完成该课程</div>
            </div>
          </el-tooltip>
        </template>
        <template slot-scope="scope">
          <div>{{ scope.row.score ? scope.row.score.toFixed(2) : "0.00" }}</div>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        v-if="gradeType == 1"
        sortable
        width="100"
        prop="score"
      >
        <template #header> 百分制</template>
        <template slot-scope="scope">
          <div>{{ scope.row.score ? scope.row.score.toFixed(2) : "0.00" }}</div>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        sortable
        v-if="gradeType == 2"
        width="100"
      >
        <template #header> 优良等级</template>
        <template slot-scope="scope">
          <div>{{ excellentLevel[scope.row.excellentLevel] }}</div>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        sortable
        v-if="gradeType == 3"
        width="100"
      >
        <template #header> 学分制</template>
        <template slot-scope="scope">
          <div>{{ scope.row.credit }}</div>
        </template>
      </el-table-column>
      <el-table-column
        label="评价"
        align="center"
        prop="avgScore"
        sortable
        width="180"
      >
        <template slot-scope="scope">
          <div style="text-align: left !important">
            <el-rate
              :value="scope.row.courseStar ? scope.row.courseStar : 0"
              disabled
              show-score
              text-color="#ff9900"
              score-template="{value}"
            >
            </el-rate>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        width="100"
        label="操作"
        align="center"
        fixed="right"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <!-- <el-button
            v-preventReClick
            size="mini"
            type="text"
            icon="el-icon-view"
            @click="handleGradeDetail(scope.row, scope.$index)"
            >成绩详情</el-button
          >
          <el-button
            v-preventReClick
            size="mini"
            type="text"
            icon="el-icon-view"
            @click="handleAppraiseDetail(scope.row, scope.$index)"
            >评价详情</el-button
          > -->
          <el-button
            v-preventReClick
            size="mini"
            type="text"
            icon="el-icon-view"
            @click="handleDetail(scope.row)"
          >详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <!-- 成绩详情 -->
    <studentGradeDetail
      :open.sync="studentGradeDetailOpen"
      :courseStuId="studentGradeDetailId"
      :index="studentGradeDetailIndex"
      :list="studentGradeDetailList"
    ></studentGradeDetail>
    <!-- 评价详情 -->
    <courseAppraiseDetailDia
      :open.sync="teacherDetailDiaOpen"
      :item="teacherDetailDiaItem"
    ></courseAppraiseDetailDia>
    <el-dialog
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      title="按班级导出成绩"
      :visible="exportDialogOpen"
      width="600px"
      append-to-body
      @close="cancel()"
    >
      <div class="export_detial">
        <div class="export_detial_item">
          <div class="label">选择学期</div>
          <el-select
            class="school_semester"
            v-model="params.schoolSemesterId"
            @change="getGradesSchedulingList"
            placeholder="请选择学期"
          >
            <el-option
              v-for="item in schoolSemesterList"
              :key="item.semesterId"
              :label="item.semesterName"
              :value="item.semesterId"
            >
            </el-option>
          </el-select>
        </div>
        <div class="export_detial_item">
          <div class="label">选择班级</div>
          <el-select
            multiple
            collapse-tags
            v-model="params.classIds"
            @change="changeSchoolSelect"
            placeholder="请选择"
          >
            <el-checkbox
              v-model="checkClassAll"
              @change="selectSchoolAll"
              style="margin: 10px 20px"
            >全选
            </el-checkbox
            >
            <el-option
              v-for="(item, index) in classSchedulingList"
              :key="index"
              :label="item.className"
              :value="item.classId"
              class="classSelect"
            >
              <div @click.prevent="handleCheckItem(item)">
                <el-checkbox
                  style="margin: 10px 20px"
                  v-model="item.check"
                  :label="item.classId"
                >
                  {{ item.className }}
                </el-checkbox
                >
              </div>
            </el-option>
          </el-select>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">关 闭</el-button>
        <el-button v-preventReClick type="primary" @click="confirm"
        >导 出
        </el-button>
      </div>
    </el-dialog>

    <gradeDetail
      :courseType="courseType"
      :studentId="gradeDetail_studentId"
      :open.sync="gradeDetail_open"
      :propCourseStuId="gradeDetail_courseStuId"
      :propList="gradeDetail_propList"
    ></gradeDetail>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import studentGradeDetail from '../schoolOrganization/components/studentGradeDetail.vue'
import courseAppraiseDetailDia from './components/courseAppraiseDetailDia.vue'
import {
  getPost_courseStuData,
  getPost_courseStuDataBase
} from '@/api/course/course'
import { getSchoolSemesterList } from '@/api/schoolSemester/schoolSemester'
import { getclassListBycourseId } from '@/api/statistics/statistics'
import gradeDetail from '@/components/gradeDetail.vue'
import { parseTime } from '@/utils/cc'

export default {
  components: { studentGradeDetail, courseAppraiseDetailDia, gradeDetail },
  dicts: ['sys_course_type'],
  props: {},
  data() {
    return {
      // 详情组件
      courseType: '',
      gradeDetail_open: false,
      gradeDetail_courseStuId: '',
      gradeDetail_studentId: '',
      studentId: '',
      gradeDetail_propList: [],

      params: {
        //学期id
        schoolSemesterId: this.$store.getters.schoolInfo.semesterId,
        classIds: []
      },
      //学期列表
      schoolSemesterList: [],
      excellentLevel: {
        1: '优',
        2: '良',
        3: '中',
        4: '差'
      },
      // 评价详情组件参数
      teacherDetailDiaOpen: false,
      teacherDetailDiaItem: {},
      // 成绩详情组件参数
      studentGradeDetailOpen: false,
      studentGradeDetailId: '',
      studentGradeDetailIndex: '',
      studentGradeDetailList: [],
      // 遮罩层
      loading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: false,
      // 总条数
      total: 0,
      // 岗位表格数据
      postList: [],
      gradeType: null,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        name: undefined,
        classId: undefined,
        minScore: undefined,
        maxScore: undefined,
        evaluateStatus: undefined,
        studyBegin: undefined,
        studyEnd: undefined,
        studyStatus: undefined,
        minNum: 0,
        maxNum: 5,
        semesterId: ''
      },
      info: {},
      classes: [],
      exportDialogOpen: false,
      classSchedulingList: [],
      checkClassAll: false,
      checkArr: []
    }
  },
  watch: {},
  computed: {},
  methods: {
    parseTime,
    setCreditOption(data) {
      let myChart = echarts.init(this.$refs.creditDetailsRef)
      let option
      option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          bottom: '5%',
          left: 'left'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      option && myChart.setOption(option)
    },
    async getGradesSchedulingList() {
      let params = {
        semesterId: this.queryParams.semesterId
      }
      let res = await getclassListBycourseId(
        this.$route.query.courseId,
        params
      )
      if (res.code == 200) {
        if (res.data.length > 0) {
          this.classSchedulingList = res.data
          this.classSchedulingList.map((item) => {
            item.check = false
          })
          this.classes = res.data
        } else {
          this.classSchedulingList = []
        }
      }
    },
    // 班级全选
    selectSchoolAll() {
      this.params.classIds = []
      this.checkArr = []
      if (this.checkClassAll) {
        this.classSchedulingList.map((item) => {
          item.check = true
          this.params.classIds.push(item.classId)
          this.checkArr.push(item.classId)
        })
      } else {
        this.classSchedulingList.map((item) => {
          item.check = false
        })
        this.params.classIds = []
        this.checkArr = []
      }
    },
    handleCheckItem(item) {
      if (item.check) {
        item.check = false
        this.checkArr.splice(this.params.classIds.indexOf(item.classId), 1)
      } else {
        item.check = true
        this.checkArr.push(item.classId)
      }
    },
    // 班级反选
    changeSchoolSelect(val) {
      this.checkClassAll = val.length === this.classSchedulingList.length
    },
    confirm() {
      if (this.checkArr.length == 0) {
        this.$modal.msgWarning('请选择班级')
        return
      }
      let excelName = `《${this.info.courseName}》成绩`
      this.download(
        `/school/manager/grades/exportClassCourseGrades/${this.$route.query.courseId}/${this.params.schoolSemesterId}`,
        { classIds: this.checkArr.join(',') },
        `${excelName}.xlsx`
      )
      this.exportDialogOpen = false
    },
    async getSchoolSemester() {
      let res = await getSchoolSemesterList()
      const { code, rows } = res
      if (code == 200) {
        this.schoolSemesterList = rows
      }
    },
    cancel() {
      this.exportDialogOpen = false
    },
    showExportDialog() {
      this.exportDialogOpen = true
    },
    async handleDetail(row) {
      this.queryParams.courseId = this.$route.query.courseId
      this.queryParams.studyBeginMin = this.queryParams.studyBegin
        ? this.queryParams.studyBegin[0]
        : ''
      this.queryParams.studyBeginMax = this.queryParams.studyBegin
        ? this.queryParams.studyBegin[1]
        : ''
      delete this.queryParams.studyBegin
      this.queryParams.studyEndMin = this.queryParams.studyEnd
        ? this.queryParams.studyEnd[0]
        : ''
      this.queryParams.studyEndMax = this.queryParams.studyEnd
        ? this.queryParams.studyEnd[1]
        : ''
      this.queryParams.studyStatus =
        this.queryParams.studyStatus > 0 ? this.queryParams.studyStatus : ''
      // this.queryParams.pageSize = 9999;
      let params = { ...this.queryParams.pageSize }
      params.pageSize = 9999
      delete this.queryParams.studyEnd
      getPost_courseStuData(this.queryParams).then((response) => {
        response.rows.map((item) => {
          if (!item.avgEvaluateStar) {
            item.avgEvaluateStar = 0
          }
        })
        this.gradeDetail_propList = response.rows
        this.courseType = this.$route.query.courseType
        this.gradeDetail_courseStuId = row.courseStuId
        this.gradeDetail_studentId = row.studentId
        this.studentId = row.studentId
        this.gradeDetail_open = true
      })
    },
    handleGradeDetail(row, index) {
      this.studentGradeDetailOpen = true
      // 此处为获取ccCourseStuI
      this.studentGradeDetailId = row.courseStuId
      this.studentGradeDetailIndex = index
      this.studentGradeDetailList = this.postList
    },
    /** 查询岗位列表 */
    getList() {
      this.loading = true
      this.queryParams.courseId = this.$route.query.courseId
      this.queryParams.studyBeginMin = this.queryParams.studyBegin
        ? this.queryParams.studyBegin[0]
        : ''
      this.queryParams.studyBeginMax = this.queryParams.studyBegin
        ? this.queryParams.studyBegin[1]
        : ''
      delete this.queryParams.studyBegin
      this.queryParams.studyEndMin = this.queryParams.studyEnd
        ? this.queryParams.studyEnd[0]
        : ''
      this.queryParams.studyEndMax = this.queryParams.studyEnd
        ? this.queryParams.studyEnd[1]
        : ''
      delete this.queryParams.studyEnd
      let params = JSON.parse(JSON.stringify(this.queryParams))
      params.studyStatus = params.studyStatus > 0 ? params.studyStatus : ''
      getPost_courseStuData(params).then((response) => {
        response.rows.map((item) => {
          if (!item.avgEvaluateStar) {
            item.avgEvaluateStar = 0
          }
        })
        this.postList = response.rows
        if (response.rows.length > 0) {
          this.gradeType = response.rows[0].gradeType
        }

        this.total = response.total
        this.loading = false
      })
    },
    /* 查询学生详细信息 */
    async getInfo() {
      let res = await getPost_courseStuDataBase(this.$route.query.courseId)
      this.info = res.data
      this.setCreditOption([
        {
          value: res.data.examScorePercentage
            ? res.data.examScorePercentage
            : 0,
          name: '终结性考核'
        },
        {
          value: res.data.processScorePercentage
            ? res.data.processScorePercentage
            : 0,
          name: '过程性考核'
        },
        {
          value: res.data.usualScorePercentage
            ? res.data.usualScorePercentage
            : 0,
          name: '日常分'
        }
      ])
    },
    handleInputScoreChange1(value) {
      if (value > this.queryParams.maxScore) {
        this.$nextTick(() => {
          this.$set(this.queryParams, 'minScore', this.queryParams.maxScore)
        })
      }
    },
    handleInputScoreChange2(value) {
      if (value < this.queryParams.minScore) {
        this.$nextTick(() => {
          this.$set(this.queryParams, 'maxScore', this.queryParams.minScore)
        })
      }
    },
    handleInputNumberChange1(value) {
      if (value > this.queryParams.maxNum) {
        this.$nextTick(() => {
          this.$set(this.queryParams, 'minNum', this.queryParams.maxNum)
        })
      }
    },
    handleInputNumberChange2(value) {
      if (value < this.queryParams.minNum) {
        this.$nextTick(() => {
          this.$set(this.queryParams, 'maxNum', this.queryParams.minNum)
        })
      }
    },
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.queryParams.minNum = 0
      this.queryParams.maxNum = 5
      this.queryParams.minScore = undefined
      this.queryParams.maxScore = undefined
      this.handleQuery()
    }
  },
  created() {
  },
  mounted() {
    this.getInfo()
    this.getList()
    //获取学期列表
    this.getSchoolSemester()
    //查询课程下所有班级的排课记录
    this.getGradesSchedulingList()
  }
}
</script>
<style scoped lang="scss">
.classSelect.el-select-dropdown__item {
  padding: 0 !important;
  height: 52px !important;
}

.classSelect.el-select-dropdown__item::after {
  display: none;
}

.info.flex {
  // max-width: 1400px;
  width: 100%;
  justify-content: space-between;
  margin: 23px 0 0 0;

  .info_avatar {
    margin: 0 24px 0 10px;

    .info_avatar_img {
      width: 120px;
      height: 64px;
      box-sizing: border-box;
      border: 1px solid rgba(229, 229, 229, 1);
    }

    .courseStar {
      margin-top: -7px;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 30px;
      background: rgba(0, 0, 0, 0.3);
    }
  }

  .info_right {
    .info_teacherinfos {
      .info_teacherinfo_line_item_short {
        box-sizing: border-box;
        padding-right: 25px;
        width: 200px;
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
        color: rgba(96, 98, 102, 1);
      }

      .info_teacherinfo_line_item {
        box-sizing: border-box;
        padding-right: 25px;
        width: 276px;
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
        color: rgba(96, 98, 102, 1);

        .info_teacherinfo_line_item_nickname {
          font-size: 18px;
          font-weight: 600;
          line-height: 20px;
          color: rgba(51, 51, 51, 1);
          max-width: 227px;
        }

        .sex {
          margin: 5px 0 0 5px;
          width: 12px;
          height: 12px;
        }
      }

      .info_teacherinfo_line1 {
        margin-top: 3px;
      }

      .info_teacherinfo_line2 {
        margin-top: 15px;
      }
    }

    .info_dataCards {
      margin-top: 22px;

      .info_dataCard {
        height: 112px;
        border-radius: 8px;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0 0 12px rgba(99, 99, 99, 0.14);
        box-sizing: border-box;
        padding: 16px 20px 0 20px;

        .info_dataCard_topLine.flex {
          .info_dataCard_topLine_point {
            margin: 5px 8px 0 0;
            width: 10px;
            height: 10px;
            border-radius: 5px;
          }

          .info_dataCard_topLine_lable {
            font-size: 14px;
            font-weight: 600;
            line-height: 20px;
            color: rgba(51, 51, 51, 1);

            span {
              margin: 4px 0 0 0;
              font-size: 10px;
              font-weight: 400;
              line-height: 14px;
              color: rgba(51, 51, 51, 1);
            }
          }
        }

        .info_dataCard_dateLine2 {
        }

        .info_dataCard_dateLine1 {
        }

        .info_dataCard_dateLine.flex {
          margin-top: 20px;

          .info_dataCard_dateLine_item {
            .info_dataCard_dateLine_item_lable {
              font-size: 12px;
              font-weight: 400;
              line-height: 17px;
              color: rgba(153, 153, 153, 1);
            }

            .info_dataCard_dateLine_item_value {
              margin-top: 4px;
              font-size: 18px;
              font-weight: 600;
              line-height: 25px;
              color: rgba(238, 62, 62, 1);

              span {
                margin: 4px 0 0 0;
                font-size: 12px;
                font-weight: 400;
                line-height: 16px;
                color: rgba(51, 51, 51, 1);
              }
            }
          }
        }
      }
    }
  }
}

.info_btn {
  position: absolute;
  right: 40px;
  top: 20px;
}

.export_detial {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;

  .export_detial_item {
    display: flex;
    align-items: center;

    ::v-deep .el-select {
      width: 217px;
    }
  }

  .label {
    font-weight: 500;
    margin-right: 15px;
    text-align: left;
  }

  .school_semester {
    width: 217px;
    margin: 10px 0;
  }
}
</style>
